<script setup lang="ts">
import CommonMusicTable from './Common/CommonMusicTable.vue';
import { setSrcAndPlay, setSrcAndPlayKey, addMusicToListKey, addMusicToList, popMessageKey, popMessage, Music, User } from '@/type';
import { inject } from 'vue';
const setSrcAndPlay = inject(setSrcAndPlayKey) as setSrcAndPlay
const addMusicToList = inject(addMusicToListKey) as addMusicToList
const props = defineProps<{
    musicList: Music[],
    myMusic: boolean,
    singerList: User[],
    musicListId: string
}>()
// 歌手信息
const popMessage = inject(popMessageKey) as popMessage

</script>
<template>
    <!-- myMusic用于区分我的音乐与直接进入歌单页不同显示效果 -->
    <div :class="{ musicList: true, musicList_: props.myMusic }">
        <div :class="{ title: true, title_: props.myMusic }">
            <h2 :class="{ musicTitle: props.myMusic }">歌曲列表</h2>
            <!-- props.musicList.length -->
            <span>{{ props.musicList.length > 0 ? props.musicList.length : 0 }}首歌</span>
        </div>
        <CommonMusicTable :my-music="props.myMusic" model="musicList" :page-size="20" :music-list="props.musicList"
            :type-id="musicListId" :singer="props.singerList" />

    </div>
</template>
<style lang="css" scoped>
.musicTitle {
    margin-left: 45px !important;
}

.musicList_ {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.musicList_ h2 {
    margin-left: 10px;
}

/* 以上为我的音乐-创建的歌单的特殊效果 */
.item .t2 {
    cursor: pointer;
}


.musicList th:first-child {
    border-left: 1px solid #ddd;
}


.musicList {
    padding: 45px 30px 0px 40px;
    margin-bottom: 50px;
}

.title {
    display: flex;
    height: 40px;
    align-items: center;
}

.title span {
    line-height: 40px;
}

.title h2 {
    font-weight: normal;
    margin: 0 10px 0 0;
    font-size: 20px;
}
</style>